<template>
  <div class="smart">
    <div class="smart-left">
      <ul class="smart-nav">
        <li :class="item.id==active?'active':''" v-for="(item,index) in smart_nav" @click="switch_fn(item.id)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="smart-right">
      <router-view/>
    </div>
  </div>
</template>

<script>
  import gantt from 'dhtmlx-gantt';  // 引入模块
  import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker.js'  // 引入模块
  import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
  import '../../plugins/locale_cn.js';
  export default {
    name: "Smart",
    data() {
      return {
        active: '1',//1：今日看板2：项目甘特图3：项目趋势4：任务趋势5：人员工时6：排行榜7：工作简报
        smart_nav: [
          {
            id: 1,
            name: '今日看板',
          }, {
            id: 2,
            name: '项目甘特图',
          }, {
            id: 3,
            name: '项目趋势',
          }, {
            id: 4,
            name: '任务趋势',
          }, {
            id: 5,
            name: '人员工时',
          }, {
            id: 6,
            name: '排行榜',
          }, {
            id: 7,
            name: '工作简报',
          }
        ]
      }
    },
    created(){
      console.log(this.$route.name);
      if(this.$route.name=='ToDay'){
        this.active=1;
      }else if(this.$route.name=='Gantt'){
        this.active=2;
      }else if(this.$route.name=='ProjectTrend'){
        this.active=3;
      }else if(this.$route.name=='TaskTrend'){
        this.active=4;
      }else if(this.$route.name=='StaffHours'){
        this.active=5;
      }else if(this.$route.name=='RankingList'){
        this.active=6;
      }else if(this.$route.name=='WorkBriefing'||this.$route.name=='WorkBriefingDetailsWeek'||this.$route.name=='WorkBriefingDetailsMonth'||this.$route.name=='WorkBriefingSummary'){
        this.active=7;
      }
    },
    methods: {
      switch_fn(_id) {
        this.active = _id;
        switch (_id) {
          case 1:
            this.$router.push({path: '/smart/toDay'});
            break;
          case 2:
            console.log(_id);
            this.$router.push({path: '/smart/gantt'});
            break;
          case 3:
            console.log(_id);
            this.$router.push({path: '/smart/projectTrend'});
            break;
          case 4:
            console.log(_id);
            this.$router.push({path: '/smart/taskTrend'});
            break;
          case 5:
            console.log(_id);
            this.$router.push({path: '/smart/staffHours'});
            break;
          case 6:
            console.log(_id);
            this.$router.push({path: '/smart/rankingList'});
            break;
          case 7:
            console.log(_id);
            this.$router.push({path: '/smart/workBriefing'});
            break;
          default:
            break;
        }
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .smart {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 24px;

    .smart-left {
      width: 256px;
      height: 100%;
      background-color: #ffffff;
      border-radius: 6px;

      .smart-nav {
        > li {
         margin-top: 32px;
          padding-left: 32px;
          color: #96A2AA;
          font-size: 16px;
          cursor: pointer;
        }

        > li.active {
          color: #454A55;
          font-weight: Bold;
        }
      }

    }

    .smart-right {
      margin-left: 24px;
      width: calc(100% - 256px);
      position: relative;
    }
  }
</style>
